<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变效果</title>
    <style>
        body{
            margin:0;
             /*这是body自带了8个外边距，所以把清除掉*/
        }
        .linear{
            width: 100%;
            height: 300px;
            background:linear-gradient( to top,yellowgreen,blue,red);
        }

        .repeating{
            width: 100%;
            height: 300px;
            background:repeating-linear-gradient(red, yellow 10%, green 20%);
        }

        .radial{
            width: 50%;
            height: 300px;
            background:radial-gradient(circle, red, yellow, green);
        }
    </style>
</head>
<body>
<div class="linear"></div>
<div class="repeating"></div>
<div class="radial"></div>
</body>
</html>
